
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

body,
page {
  --primary: #{$primary};
  --sub: #{$sub};
  --c000: #000;
  --c111: #111;
  --c222: #222;
  --c333: #333;
  --c444: #444;
  --c555: #555;
  --c666: #666;
  --c777: #777;
  --c888: #888;
  --c999: #999;
  --aaa: #aaa;
  --bbb: #bbb;
  --ccc: #ccc;
  --ddd: #ddd;
  --eee: #eee;
  --fff: #fff;
  --nav-bg-c: #DEE082;
  --bg: #{$bg};
  --black: #{$black};
  --text: var(--black);
  --gray: var(--aaa);
  --border: var(--ddd);
  --f3f4f6: #f3f4f6;
  --f7f8fa: #f7f8fa;
  --fcfcfc: #fcfcfc;
  --F0FBFF: #F0FBFF;
  --fix-bottom: 0;
  --bottom-fixed-bar-height: 100rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  background: var(--bg);
  color: $black;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  word-break: break-all;
}

@supports (top:constant(safe-area-inset-bottom)) {
  body,
  page {
    --fix-bottom: constant(safe-area-inset-bottom);
  }
}

@supports (top:env(safe-area-inset-bottom)) {
  body,
  page {
    --fix-bottom: env(safe-area-inset-bottom);
  }
}

*,
view,
text {
  box-sizing: border-box;
}

.w-100-p{
	width:100%;
}

.bottom-fixed-bar {
  height: calc(var(--bottom-fixed-bar-height) + var(--fix-bottom));
  padding-bottom: var(--fix-bottom);
}

.jd-num {
  //font-family: JDZhengHT, serif;
}

.hoefler {
  font-family: hoefler, serif;
}

.iconfont {
  font-family: "iconfont", serif;
  font-size: 28rpx;
}

uni-input {
  font-size: 28rpx;
}

button:after,
uni-button:after {
  border: 0;
  content: "";
}
.not-shrink{
  flex-shrink: 0;
}
.blue {
  color: $blue;
}

.primary {
  color: var(--primary);
}

.sub {
  color: var(--sub);
}

.green {
  color: $green;
}

.red {
  color: $red;
}

.orange {
  color: $orange;
}

.gray {
  color: $gray;
}

.black {
  color: $black;
}

.white {
  color: #fff;
}

.brown {
  color: $brown;
}

.primary-bg {
  background: var(--primary);
  color: #fff;
}

.sub-bg {
  background: var(--sub);
  color: #fff;
}

.green-bg {
  background: $green;
  color: #fff;
}

.red-bg {
  background: $primary;
  color: #fff;
}

.orange-bg {
  background: $orange;
  color: #fff;
}

.blue-bg {
  background-color: $blue;
  color: #fff;
}

.gray-bg {
  background: $gray;
}

.black-bg {
  background: $black;
}

.white-bg {
  background: #fff;
}

.font10 {
  font-size: 20rpx !important;;
}

.font11 {
  font-size: 22rpx !important;;
}

.font12 {
  font-size: 24rpx !important;;
}

.font13 {
  font-size: 26rpx !important;;
}

.font14 {
  font-size: 28rpx !important;;
}

.font15 {
  font-size: 30rpx !important;;
}

.font16 {
  font-size: 32rpx !important;
}

.font17 {
  font-size: 34rpx !important;;
}

.font18 {
  font-size: 36rpx !important;;
}

.font19 {
  font-size: 38rpx !important;;
}

.font20 {
  font-size: 40rpx !important;;
}

.font22 {
  font-size: 44rpx !important;;
}

.font24 {
  font-size: 48rpx !important;;
}

.font26 {
  font-size: 52rpx !important;;
}

.font28 {
  font-size: 56rpx !important;;
}

.font30 {
  font-size: 60rpx !important;;
}

.right-arrow {
  position: relative;
  padding-right: 40rpx;

  &::after {
    font-family: 'iconfont', serif;
    content: '\e606';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10rpx;
    color: #c2c2c2;
    text-align: center;
    transition: all 0.3s;
  }
}

button {
  font-size: 32rpx;
  background-color: $bg;
}

button[type='primary'],
button[loading][type=primary],
.button-hover[type=primary] {
  background-color: var(--primary);
}

button[disabled][type=primary] {
  background-color: rgba(var(--primary-rgb), .4);
}

.bolder {
  font-weight: bolder;
}

.flex {
  display: flex;
}

.flex-fill-item {
  flex: 1;
  width: 0;
}

.flex-center {
  display: flex;
  align-items: center;
}

.flex-start {
  display: flex;
  align-items: flex-start;
}

.flex-start-between {
  display: flex;
  justify-content: space-between;
	align-items: flex-start;
}

.flex-end {
  display: flex;
  align-items: flex-end;
}

.flex-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: left;
}
.mt10{
	margin-top: 10rpx;
}

.mt20{
	margin-top: 20rpx;
}

.mp20{
  margin: 20rpx 0;
}

.ml20{
  margin-left: 20rpx;
}

.ml10{
  margin-left: 10rpx;
}

.mb10{
  margin-bottom: 10rpx;
}

.mr10{
  margin-right: 10rpx;
}
.mr20{
  margin-right: 20rpx;
}
.mb20{
  margin-bottom: 20rpx;
}

.mb30{
  margin-bottom: 30rpx;
}

.mb60{
  margin-bottom: 60rpx;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.flex-center-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-center-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-through {
  text-decoration: line-through;
}

.row-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}

.bolder {
  font-weight: bolder;
}

.txt-center {
  text-align: center;
}

.dark {
  --c000: #fff;
  --c111: #fff;
  --c222: #fff;
  --c333: #eee;
  --c444: #ddd;
  --c555: #ccc;
  --c666: #bbb;
  --c777: #aaa;
  --c888: #999;
  --c999: #888;
  --aaa: #777;
  --bbb: #666;
  --ccc: #555;
  --ddd: #444;
  --eee: #333;
  --fff: #222;
  --bg: #111;
  --black: #eee;
  --gray: var(--aaa);
  --border: var(--ddd);
  --f7f8fa: #181818;
  --fcfcfc: #121212;
  --F0FBFF: #999;
  --f3f4f6: #181818;

  .black {
    color: #eee;
  }

  .white {
    color: $black;
  }

  .gray {
    color: #999;
  }

  .gray-bg {
    background: #999;
  }

  .black-bg {
    background: #fff;
  }

  .white-bg {
    background: $black;
  }

  image[data-cc*=nav],
  .invert {
    filter: invert(0.87);
  }
}
.safe-area-inset-top {
  padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
  padding-top: env(safe-area-inset-top); /* iOS 11.2+ */
}